<template>
	<view>
		<!-- <uni-nav-bar shadow :title="title" @clickLeft="back" height="88rpx" :border="false" :fixed="true"
			backgroundColor="#FFFFFF" :shadow="false" left-icon="left"></uni-nav-bar> -->
			<shopro-navbar back-icon-color="#fff" :background="{}"
				:backTextStyle="{ color: '#000', fontSize: '30rpx', fontWeight: '500' }" :isSharePage='isSharePage' :backText="isSharePage?'返回首页':''">
			</shopro-navbar>
		<view class="container">
			   <view style="position: relative;">
				   <view class="video-tel" ref="videoTel">{{setShareInfo.mobile}}</view>
				
				<div id="player-con" src=""></div>
				<view class="video-infor">
					<view class="left">
						<text>{{user.sign}}</text>
						<text>用户名：{{setShareInfo.name}}</text>
						<text>电话：{{setShareInfo.mobile}}</text>
					</view>
					<view class="right">
						<image style="width:100rpx;background-color: #eeeeee;" mode="widthFix" :src="setShareInfo.image">
						</image>
					</view>
				</view>
			</view>
		</view>
		<view class="detail-info">
			<u-parse :html="detailInfo"></u-parse>
		</view>
		<share-modal :userid='shoreId' ref="ShareModal"></share-modal>
		<uni-popup is-mask-click='false' :mask-click='false' style="background-color:rgba(0,0,0,.4); z-index: 101;"
			id="SureSubmit" ref="SureSubmit" type="dialog">
			<view class="floatcontainer">
				<view class="text">
					暂无授权,授权后方可查看,请联系客服18926048918
				</view>

				<view class="btnContainer">
					<button type="default" @click="$wanlshop.back(1)">关闭</button>
					<!-- 			<button type="primary" @click="buy()"
						style="background: #8CBF6B;color: #fff;">购买</button> -->
				</view>
			</view>
		</uni-popup>
		<view class="btn-bottom-fixed">
			<view  @tap="$wanlshop.auth('/pages/teacher/userCard')" class="changeCardBtn">
				<image src="../../static/images/live/hand.png" class="hand-img"></image><text>1.点击设置名片信息</text>
			</view>
			<view  @tap="showGuide=!showGuide" class="changeCardBtn">
				<image src="../../static/images/live/share.png" class="share-img"></image><text>2.分享去引流</text>
			</view>
		</view>
		<view class="showGuidebg" v-show="showGuide" @click="showGuide=!showGuide">
			<view class="showGuideStyle"></view>
		</view>
		<ad-modal ref="adModal" @jumpAd='jumpAd'></ad-modal>
	</view>

</template>

<script>
	import shareModal from '@/pages/teacher/components/shareModal.vue'
	import share from '@/shopro/share/index.js'
	import jssdk from '@/common/libs/jssdk.js'
	import adModal from '@/pages/teacher/components/adModal.vue'
	export default {
		components: {
			shareModal,
			adModal
		},
		data() {
			return {
				user: {},
				username: '',
				id: '',
				title: '',
				AllList: [],
				currentPage: '1',
				src: '',
				package_vip: "",
				isSharePage: false,
				playTime: 0,
				shoreDesc: '',
				shorePic: "",
				shoreId: '',
				detailInfo: "",
				freeTime: "",
				videoInfo: {},
				player:null,
				showGuide:false,
				setShareInfo:{}
			}
		},
		async onLoad(option) {
			this.id = option.id;
			this.title = option.name;
			this.type = option.type
			this.user = uni.getStorageSync('userInfo')
			this.setShareInfo=uni.getStorageSync("setShareInfo")
			this.getList()
			if (window.location.href.indexOf('&isShare=true') !== -1) {
				this.isSharePage = true
				this.shoreId = option.userid
			}
		},
		onHide() {
			uni.hideLoading()
		},
		onShow(){
			this.$refs.ShareModal.loadCard()
			this.setShareInfo=uni.getStorageSync("setShareInfo")
		},
		watch: {
			playTime(val, up) {
				console.log(5656565, val, up)
				if (val === 0) {
					// uni.showLoading({
					// 	title: "加载中..."
					// })
				} else {
					uni.hideLoading()
				}
			}
		},
		onReady() {
			// this.getList()
		},
		methods: {
			loadedmetadata(e) {
				this.playTime = e.detail.duration
			},
			changeLocal() {
				this.$refs.videoTel.$el.style.top = Math.random() * 180 + 'px';
				this.$refs.videoTel.$el.style.left = Math.random() * 300 + 'px';
			},
			setShare() {
				let shareId = uni.getStorageSync('userInfo').id
				this.SpmResult = share.setShareInfo({
					title: this.title,
					desc: '',
					image: '',
					params: {
						page: 2,
						pageId: this.id,
						shareId: shareId
					}
				});
				// let link = window.location.href + '&isShare=true&userid=' + shareId + '&' + this.SpmResult.query

				let url = window.location.href.split('&')
				let link = url[0] + url[1] + url[2] + '&isShare=true&userid=' + shareId + '&' + this.SpmResult.query

				jssdk.share({
					title: this.title,
					desc: this.shoreDesc,
					// link:encodeURIComponent(link),
					link: link,
					imgUrl: this.shorePic,
					type: '2',
					id: this.id
				})
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			//退出全屏
			 exitFull() {
			            var exitMethod =
			                document.mozCancelFullScreen || //Chrome等
			                document.webkitExitFullscreen || //FireFox
			                document.webkitExitFullscreen || //IE11
			                document.exitFullscreen; //W3C
			            if (exitMethod) {
			                exitMethod.call(document);
			            } else if (typeof window.ActiveXObject !== "undefined") { //for Internet Explorer
			                var wscript = new ActiveXObject("WScript.Shell");
			                if (wscript !== null) {
			                    wscript.SendKeys("{F11}");
			                }
			            }
			        },
			playTimes(e) {
				var currentime = e
				// let ads = this.videoInfo.news_list
				// ads.forEach(item => {

				// 	if (Number(item.seconds) <= currentime && this.hideAd) {
				// 		uni.createVideoContext('myVideo').pause()
				// 		uni.createVideoContext('myVideo').exitFullScreen()
				// 		this.$refs.adModal.showModal(item)
				// 		return
				// 	}
				// })
				if (currentime >= this.freeTime && this.package_vip == null) {
					this.player.pause();
					if(this.player.fullscreenService.isFullScreen){
						this.player.fullscreenService.cancelFullScreen();
					}
					uni.showToast({
						title: '请您先授权登录',
						icon: 'none'
					})
					setTimeout(function() {
						uni.navigateTo({
							url: `/pages/user/auth/auth`
						});
					}, 500)
				}
				if (currentime >= this.freeTime && this.package_vip == '0') {
					this.player.pause();
					if(this.player.fullscreenService.isFullScreen){
						this.player.fullscreenService.cancelFullScreen();
					}
					if (!uni.getStorageSync('userInfo')) {
						uni.showToast({
							title: '请您先授权登录',
							icon: 'none'
						})
						setTimeout(function() {
							uni.navigateTo({
								url: `/pages/user/auth/auth`
							});
						}, 500)
					} else {
						this.$refs.SureSubmit.open()
					}
				}
			},
			getLive(src) {
				let vm=this
				vm.player = new Aliplayer({
					"id": "player-con",
					"source": src,
					"width": "100%",
					  "height": "422rpx",
					  "autoplay": true,
					  "isLive": false,
					  "rePlay": false,
					  "playsinline": true,
					  "preload": true,
					  "controlBarVisibility": "hover",
					  "useH5Prism": true
					 
				}, function(e) {
					console.log("The player is created");
				});
				var timer = setInterval(() => {
				  var curTime = parseInt(vm.player.getCurrentTime());
				  if (vm.player && vm.player.getStatus() == "playing") {
						vm.playTimes(curTime)
				  }
				}, 1000);
						
			},
			getList() {
				console.log(this.id)
				// let url = this.type == 'courses' ? '/course/detail' : this.type == 'study' ? '/study/detail' : ''

				this.$api.post({
					url: '/handwork/detail',
					data: {
						id: this.id
					},
					// contentType: 'application/json',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					// dataType:'json',
					success: res => {
						console.log(res);
						var that=this;
						this.videoInfo = res
						this.shoreDesc = res.desc
						this.detailInfo = res.content
						this.freeTime = res.seconds
						this.shorePic = res.image
						this.package_vip = res.package_vip
						this.src = res.handwork_file.video_url.PlayInfoList.PlayInfo[0].PlayURL
						this.title = res.name
						this.getLive(this.src)
						this.setShare()
this.changeLocal();
						if (that.timeOut) {
							that.timeOut = null
						} else {
							that.timeOut = setInterval(that.changeLocal, 3200)
						}
					},
					fail: error => {
						console.log(error)
						uni.showToast({
							title: error.data.msg,
							icon: 'error'
						})
						if (this.isSharePage) {
							uni.navigateTo({
								url: '/pages/user/auth/auth'
							})
						} else {
							this.$wanlshop.back(1)
						}
						// setTimeout(()=>{
						// 	this.$wanlshop.back(1)
						// },1500)
					}
				})
				// if (this.playTime == 0 && this.$u.os() != "ios") {
				// 	setTimeout(() => {
				// 		uni.showLoading({
				// 			title: "视频加载中...",
				// 			mask: true
				// 		})
				// 	}, 1000)

				// }
			}
		}
	}
</script>

<style lang="scss">
	.container {
		padding-top: 28rpx;
#player-con{
				height: 422rpx;
				position: relative;
		}
		#myVideo {
			width: 100%;
			height: 422rpx;
		}
	}

	/deep/.uni-video-bar {
		z-index: 100;
	}

	.detail-info {
		margin: 20rpx 20rpx;
		min-height: 100rpx;
		padding: 20rpx;
	}
    .video-tel {
    	position: absolute;
    	left: -100%;
    	top: -100%;
    	font-size: 24rpx;
    	color: rgba(255, 255, 255, 0.6);
    	line-height: 40rpx;
    	z-index: 99;
    	opacity: 0.65;
    	transition: 3s;
    }
    
	.head-top {
		position: absolute;
		height: 60rpx;
		width: 60rpx;
		top: 20rpx;
		left: 20rpx;
		color: #fff;

		.image {
			width: 60rpx;
			height: 60rpx;
		}
	}

	.video-infor {
		position: absolute;
		left: 20rpx;
		bottom: 20rpx;
		min-width: 250rpx;
		font-size: 24rpx;
		color: #333;
		line-height: 30rpx;
		z-index: 9;
		padding-left: 30rpx;

		.left {
			background-color: #aed0fd;
			color: #333;
			padding: 10rpx;
			border-radius: 120rpx;
			// margin-left: 10rpx;
			// padding-right: 80rpx;

			text {
				display: block;
				font-size: 18rpx;
				line-height: 25rpx;
				margin-left: 50rpx;
			}
		}

		.right {
			position: absolute;
			left: 0;
			border-radius: 50%;
			overflow: hidden;
			bottom: 0;
			width: 80rpx;
			height: 80rpx;

			image {
				width: 80rpx!important;
				height: 80rpx!important;
				border-radius: 50%;
				overflow: hidden;
			}
		}
	}

	.video-infor-2 {
		position: absolute;
		right: 20rpx;
		bottom: 20rpx;
		min-width: 300rpx;
		font-size: 24rpx;
		color: #333;
		line-height: 30rpx;
		z-index: 99;
		padding-left: 30rpx;

		.left {
			background-color: #aed0fd;
			color: #333;
			padding: 10rpx;
			border-radius: 120rpx;
			margin-right: 10rpx;
			// padding-right: 80rpx;

			text {
				display: block;
				font-size: 18rpx;
				line-height: 25rpx;
				margin-left: 0rpx;
			}
		}

		.right {
			position: absolute;
			right: 0;
			border-radius: 50%;
			overflow: hidden;
			bottom: 0;
			width: 80rpx;
			height: 80rpx;

			image {
				width: 80rpx!important;
				height: 80rpx!important;
				border-radius: 50%;
				overflow: hidden;
			}
		}
	}

	.floatcontainer {
		width: 630rpx;
		height: 320rpx;
		background: #fff;
		border-radius: 20rpx;
		margin: 400rpx auto;
		padding-top: 72rpx;
	}

	.text {
		margin: 0 auto 88rpx;
		text-align: center;
	}

	.btnContainer {
		display: flex;
		justify-content: space-around;

		button {
			width: 100px;
			height: 30px;
			background: #fff;
			font-size: 13px;
			font-family: PingFang-SC-Medium-, PingFang-SC-Medium;
			font-weight: normal;
			color: #333333;
		}
	}

	.btn-bottom-fixed{
		position: fixed;
		bottom: 0;
		margin:0 auto;
		left: 0;
		right: 0;
		width: 538rpx;
	}
	.changeCardBtn {
		width: 100%;
		height: 88rpx;
		background: linear-gradient(90deg, #98E05F, #0DE3AC);
		box-shadow: 0px 2px 5px 0px rgba(30, 36, 34, 0.3);
		border-radius: 44rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
		line-height: 88rpx;
		margin-bottom: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		.hand-img{
			width: 32rpx;
			height: 36rpx;
		}
		.share-img{
			width: 32rpx;
			height: 32rpx;
		}
		text{
			margin-left: 10rpx;
			font-size: 24rpx;
		}
	}
	.showGuidebg{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0,0,0,0.4);
		z-index: 999;
	}
	.showGuideStyle{
	    position: absolute;
	    background: url(../../static/images/live/guidebg.png) no-repeat;
	    width: 100px;
		background-size: 100% 100%;
		height: 32px;
	    right: 12rpx;
	    top: 6rpx;
	}
</style>
